<!DOCTYPE html>
<html class="light" lang="es">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>IMRD Cota - Dashboard Estudiante</title>
    <link rel="icon" type="image/png" href="../favicon.png" />
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
        rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#4B8B0B",
                        secondary: "#3366CC",
                        "background-light": "#FFFFFF",
                        "background-dark": "#0F172A",
                    },
                    fontFamily: {
                        sans: ["Work Sans", "sans-serif"],
                        display: ["Work Sans", "sans-serif"],
                    },
                    borderRadius: { DEFAULT: "4px" },
                },
            },
        };
    </script>
    <script>
        // Aplicar el tema inmediatamente para evitar parpadeo
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
            document.documentElement.classList.remove('light');
        } else {
            document.documentElement.classList.remove('dark');
            document.documentElement.classList.add('light');
        }
    </script>
    <style type="text/tailwindcss">
        @layer base { body { @apply font-sans antialiased; } }
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
    </style>
</head>

<body class="bg-gray-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 flex flex-col min-h-screen">

    <div class="bg-secondary text-white py-2 px-4 md:px-12 flex items-center justify-between text-xs font-medium">
        <div class="flex items-center gap-2">
            <span class="opacity-80" data-i18n="nav-portal">Portal de Servicios IMRD Cota</span>
        </div>
        <div>
            <a href="../login/"
                class="bg-white/10 hover:bg-white/20 text-white px-3 py-1 rounded transition-colors flex items-center gap-1">
                <span class="material-symbols-outlined text-[14px]">logout</span> <span data-i18n="nav-logout">Cerrar Sesión</span>
            </a>
        </div>
    </div>

    <header
        class="bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 md:px-12 py-4 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="h-10 w-10 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                    <span class="material-symbols-outlined">school</span>
                </div>
                <div>
                    <h1 class="text-xl font-bold uppercase tracking-tight text-slate-800 dark:text-white leading-none" data-i18n="header-student">
                        Estudiante</h1>
                    <p class="text-xs text-slate-500" data-i18n="header-panel">Panel de Control</p>
                </div>
            </div>
            <nav class="flex items-center gap-6 text-sm font-medium">
                <button onclick="openSettings()" class="text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors flex items-center justify-center p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800" title="Ajustes">
                    <span class="material-symbols-outlined">settings</span>
                </button>
            </nav>
        </div>
    </header>

    <main class="flex-grow max-w-7xl mx-auto px-4 md:px-12 py-8 w-full">
        <div id="dashboard-view"
            class="bg-white dark:bg-slate-800 rounded-lg shadow p-8 text-center border border-gray-200 dark:border-slate-700 relative overflow-hidden">
            <div
                class="h-20 w-20 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                <span class="material-symbols-outlined text-4xl text-green-600">school</span>
            </div>

            <h2 class="text-3xl font-bold mb-2 text-slate-800 dark:text-white" id="welcome-name">¡Hola, Estudiante!
            </h2>
            <p class="text-slate-600 dark:text-slate-400 mb-6 font-medium" data-i18n="dash-panel">Panel de Estudiante</p>

            <div class="max-w-2xl mx-auto mt-8 space-y-4">
                <!-- Revision Status Card -->
                <div class="bg-gray-50 dark:bg-slate-700/50 p-4 rounded-lg border border-gray-200 dark:border-slate-600">
                    <span class="block text-xs uppercase tracking-wider text-slate-500 mb-1" id="dash-rev-title" data-i18n="dash-rev">Estado de Revisión</span>
                    <span class="text-lg font-bold text-slate-800 dark:text-white flex items-center justify-center gap-2" id="revision-status">
                        --
                    </span>
                </div>

                <!-- Sports Section -->
                <div id="sports-container" class="mt-8 text-left hidden">
                    <h3 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-3">Mis Deportes Inscritos</h3>
                    <div id="sports-list" class="grid grid-cols-1 gap-3"></div>
                </div>
            </div>
        </div>

        <!-- Subsanar View (Hidden by default) -->
        <div id="subsanar-view" class="hidden bg-white dark:bg-slate-800 rounded-lg shadow p-8 border border-gray-200 dark:border-slate-700 relative">
            <button onclick="showDashboard()" class="mb-6 flex items-center text-sm text-slate-500 hover:text-primary transition-colors">
                <span class="material-symbols-outlined mr-1">arrow_back</span> Volver al Panel
            </button>
            
            <div class="text-center mb-8">
                <div class="h-16 w-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="material-symbols-outlined text-3xl text-red-600">edit_document</span>
                </div>
                <h2 class="text-2xl font-bold text-slate-800 dark:text-white">Subsanar Documentos</h2>
                <p class="text-slate-600 dark:text-slate-400 mt-2">
                    Por favor revisa las observaciones y vuelve a cargar los documentos necesarios.
                </p>
            </div>

            <div class="max-w-3xl mx-auto bg-gray-50 dark:bg-slate-700/30 rounded-lg p-8 border border-gray-200 dark:border-slate-600 text-center">
                 <p class="text-slate-500 mb-4">Aquí se cargará el formulario de subsanación.</p>
                 <!-- Placeholder for form or iframe -->
                 <div class="animate-pulse flex space-x-4 justify-center">
                    <div class="rounded-full bg-slate-200 h-10 w-10"></div>
                    <div class="flex-1 space-y-6 py-1 max-w-xs">
                        <div class="h-2 bg-slate-200 rounded"></div>
                        <div class="space-y-3">
                            <div class="grid grid-cols-3 gap-4">
                                <div class="h-2 bg-slate-200 rounded col-span-2"></div>
                                <div class="h-2 bg-slate-200 rounded col-span-1"></div>
                            </div>
                            <div class="h-2 bg-slate-200 rounded"></div>
                        </div>
                    </div>
                 </div>
            </div>
        </div>

        <!-- Sport Details View (Hidden by default) -->
        <div id="sport-details-view" class="hidden bg-white dark:bg-slate-800 rounded-lg shadow p-8 border border-gray-200 dark:border-slate-700 relative">
            <button onclick="showDashboard()" class="mb-6 flex items-center text-sm text-slate-500 hover:text-primary transition-colors">
                <span class="material-symbols-outlined mr-1">arrow_back</span> Volver al Panel
            </button>

            <div class="text-center mb-8">
                <div class="h-16 w-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="material-symbols-outlined text-3xl text-blue-600">sports_score</span>
                </div>
                <h2 class="text-2xl font-bold text-slate-800 dark:text-white" id="sport-details-title">Detalles del Deporte</h2>
            </div>

            <div class="flex flex-wrap border-b border-gray-200 dark:border-slate-700 mb-6 gap-2 justify-center">
                <button onclick="switchSportTab('comunicados')" id="tab-comunicados" class="sport-tab active px-4 py-2 border-b-2 font-medium text-sm border-primary text-primary transition-colors focus:outline-none">Comunicados</button>
                <button onclick="switchSportTab('profesor')" id="tab-profesor" class="sport-tab px-4 py-2 border-b-2 border-transparent font-medium text-sm text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-colors focus:outline-none">Información del Profesor</button>
                <button onclick="switchSportTab('deporte')" id="tab-deporte" class="sport-tab px-4 py-2 border-b-2 border-transparent font-medium text-sm text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-colors focus:outline-none">Información del Deporte</button>
            </div>

            <div id="tab-content-comunicados" class="sport-tab-content block text-center py-10">
                <span class="material-symbols-outlined text-6xl text-slate-300 dark:text-slate-600 mb-4 block">notifications_off</span>
                <p class="text-slate-500 font-medium text-lg">Sin comunicados</p>
            </div>

            <div id="tab-content-profesor" class="sport-tab-content hidden max-w-xl mx-auto">
                <div class="bg-gray-50 dark:bg-slate-700/30 rounded-lg p-6 border border-gray-200 dark:border-slate-600">
                    <div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
                        <div class="w-32 h-32 bg-slate-200 dark:bg-slate-600 rounded-lg flex items-center justify-center text-slate-400 shrink-0 overflow-hidden border border-gray-300 dark:border-slate-500">
                            <span class="material-symbols-outlined text-5xl">person</span>
                            <!-- Espacio para la foto del profesor -->
                        </div>
                        <div class="flex-grow space-y-4 w-full">
                            <div>
                                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1">Nombres y Apellidos</label>
                                <div class="bg-white dark:bg-slate-800 px-3 py-2 rounded border border-gray-200 dark:border-slate-600 h-10 w-full flex items-center text-slate-400 text-sm italic">
                                    <!-- A la espera de datos -->
                                </div>
                            </div>
                            <div>
                                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1">Información Adicional</label>
                                <div class="bg-white dark:bg-slate-800 px-3 py-2 rounded border border-gray-200 dark:border-slate-600 h-10 w-full flex items-center text-slate-400 text-sm italic">
                                    <!-- A la espera de datos -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="tab-content-deporte" class="sport-tab-content hidden max-w-xl mx-auto space-y-4">
                <div class="bg-gray-50 dark:bg-slate-700/30 rounded-lg p-5 border border-gray-200 dark:border-slate-600 flex items-center gap-4">
                    <div class="h-12 w-12 bg-white dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-600 dark:text-slate-300 shrink-0 shadow-sm border border-gray-200 dark:border-slate-600">
                        <span class="material-symbols-outlined text-xl">location_on</span>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-1">Lugar</h4>
                        <p class="text-base text-slate-600 dark:text-slate-300" id="sp-lugar">Por definir</p>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-slate-700/30 rounded-lg p-5 border border-gray-200 dark:border-slate-600 flex items-center gap-4">
                    <div class="h-12 w-12 bg-white dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-600 dark:text-slate-300 shrink-0 shadow-sm border border-gray-200 dark:border-slate-600">
                        <span class="material-symbols-outlined text-xl">schedule</span>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-1">Horario</h4>
                        <p class="text-base text-slate-600 dark:text-slate-300" id="sp-horario">Por definir</p>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-slate-700/30 rounded-lg p-5 border border-gray-200 dark:border-slate-600 flex items-center gap-4">
                    <div class="h-12 w-12 bg-white dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-600 dark:text-slate-300 shrink-0 shadow-sm border border-gray-200 dark:border-slate-600">
                        <span class="material-symbols-outlined text-xl">sports_tennis</span>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-1">Implementos</h4>
                        <p class="text-base text-slate-600 dark:text-slate-300" id="sp-implementos">Por definir</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings Modal (Hidden by default) -->
        <div id="settings-modal" class="fixed inset-0 bg-slate-900/50 dark:bg-slate-900/80 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-lg border border-gray-200 dark:border-slate-700 overflow-hidden transform transition-all">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between bg-slate-50 dark:bg-slate-800">
                    <h3 class="text-lg font-bold text-slate-800 dark:text-white flex items-center gap-2" data-i18n="dash-settings">
                        <span class="material-symbols-outlined">settings</span> Ajustes del Perfil
                    </h3>
                    <button onclick="closeSettings()" class="text-slate-400 hover:text-red-500 transition-colors">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                </div>
                
                <div class="p-6 space-y-6">
                    <!-- Change Password Option -->
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-bold text-slate-800 dark:text-white" data-i18n="set-pass">Contraseña</h4>
                            <p class="text-xs text-slate-500 dark:text-slate-400" data-i18n="set-pass-desc">Actualiza tu contraseña de acceso</p>
                        </div>
                        <button onclick="openChangePasswordModal()" class="px-4 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded text-sm font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors" data-i18n="set-pass-btn">
                            Cambiar
                        </button>
                    </div>

                    <hr class="border-gray-200 dark:border-slate-700">

                    <!-- Dark/Light Mode Toggle -->
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-bold text-slate-800 dark:text-white" data-i18n="set-app">Apariencia</h4>
                            <p class="text-xs text-slate-500 dark:text-slate-400" data-i18n="set-app-desc">Cambiar entre modo claro y oscuro</p>
                        </div>
                        <div class="flex bg-gray-100 dark:bg-slate-900 border border-gray-200 dark:border-slate-700 rounded p-1 gap-1">
                            <button id="btn-theme-light" onclick="toggleDarkMode(false)" class="px-3 py-1 text-xs font-medium rounded bg-white text-slate-800 shadow-sm transition-colors flex items-center gap-1">
                                <span class="material-symbols-outlined text-[16px]">light_mode</span> <span data-i18n="set-app-light">Claro</span>
                            </button>
                            <button id="btn-theme-dark" onclick="toggleDarkMode(true)" class="px-3 py-1 text-xs font-medium rounded bg-transparent text-slate-500 hover:text-slate-800 dark:hover:text-white transition-colors flex items-center gap-1">
                                <span class="material-symbols-outlined text-[16px]">dark_mode</span> <span data-i18n="set-app-dark">Oscuro</span>
                            </button>
                        </div>
                    </div>

                    <hr class="border-gray-200 dark:border-slate-700">

                    <!-- Language Selector -->
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-bold text-slate-800 dark:text-white" data-i18n="set-lang">Idioma</h4>
                            <p class="text-xs text-slate-500 dark:text-slate-400" data-i18n="set-lang-desc">Selecciona el idioma de la plataforma</p>
                        </div>
                        <select id="lang-selector" onchange="changeLanguage(this.value)" class="block w-40 pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-white dark:bg-slate-900 text-slate-800 dark:text-white">
                            <option value="es" selected>Español</option>
                            <option value="en">English (Inglés)</option>
                            <option value="fr">Français (Francés)</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Change Password Modal -->
        <div id="change-password-modal" class="fixed inset-0 bg-slate-900/50 dark:bg-slate-900/80 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-sm border border-gray-200 dark:border-slate-700 overflow-hidden transform transition-all">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between bg-slate-50 dark:bg-slate-800">
                    <h3 class="text-lg font-bold text-slate-800 dark:text-white flex items-center gap-2">
                        <span class="material-symbols-outlined">lock_reset</span> Cambiar Contraseña
                    </h3>
                    <button id="btnClosePasswordModal" onclick="closeChangePasswordModal()" class="text-slate-400 hover:text-red-500 transition-colors">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                </div>
                
                <div class="p-6">
                    <form id="changePasswordForm" onsubmit="submitChangePassword(event)" class="space-y-4">
                        <div>
                            <label class="block text-sm font-bold text-slate-700 dark:text-slate-200 mb-1">Nueva Contraseña</label>
                            <input type="password" id="new_password" required class="block w-full border-gray-300 dark:border-slate-600 focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-white dark:bg-slate-900 text-slate-800 dark:text-white p-2 border">
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-slate-700 dark:text-slate-200 mb-1">Confirmar Contraseña</label>
                            <input type="password" id="confirm_password" required class="block w-full border-gray-300 dark:border-slate-600 focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-white dark:bg-slate-900 text-slate-800 dark:text-white p-2 border">
                        </div>
                        
                        <div id="changePasswordMsg" class="hidden text-xs font-semibold p-2.5 rounded text-center"></div>

                        <div class="pt-2 flex gap-2">
                            <button id="btnCancelPasswordModal" type="button" onclick="closeChangePasswordModal()" class="w-1/2 py-2 px-4 border border-gray-300 dark:border-slate-600 rounded-lg text-xs font-semibold text-slate-700 dark:text-slate-200 hover:bg-gray-100 dark:hover:bg-slate-700">
                                Cancelar
                            </button>
                            <button type="submit" id="btnSubmitPassword" class="w-1/2 bg-primary hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow transition-colors flex items-center justify-center gap-1 text-xs">
                                <span class="material-symbols-outlined text-base">save</span> Cambiar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            let nombre = sessionStorage.getItem('userNombre') || 'Estudiante';
            try {
                const fullData = JSON.parse(sessionStorage.getItem('fullUserData') || '{}');
                if (fullData.nombre || fullData.Nombre || fullData.nombres || fullData.Nombres) {
                    nombre = fullData.nombre || fullData.Nombre || fullData.nombres || fullData.Nombres;
                }
            } catch (e) {}

            const actualizacion = sessionStorage.getItem('userActualizacion');
            const revision = sessionStorage.getItem('userRevision');

            // Set Name
            document.getElementById('welcome-name').textContent = `¡Hola, ${nombre}!`;

            let isDefaultPassword = sessionStorage.getItem('mustChangePassword') === 'true';
            try {
                const fullDataStr = sessionStorage.getItem('fullUserData');
                if (fullDataStr) {
                    const parsed = JSON.parse(fullDataStr);
                    const userObj = Array.isArray(parsed) ? (parsed[0] || {}) : parsed;
                    const dbPass = String(userObj.clave || userObj.password || userObj['Contraseña'] || userObj.Clave || '').trim();
                    if (dbPass === '12345') {
                        isDefaultPassword = true;
                        sessionStorage.setItem('mustChangePassword', 'true');
                    }
                }
            } catch (e) {}

            if (isDefaultPassword) {
                openChangePasswordModal(true);
            }

            // Set Update Status with Icons/Colors
            // Set Revision Status with Icons/Colors/Messages
            const revisionEl = document.getElementById('revision-status');
            const revisionContainer = revisionEl.parentElement;
            
            // Clear existing content in container (except title) to rebuild
            revisionContainer.innerHTML = `<span class="block text-xs uppercase tracking-wider text-slate-500 mb-1" id="dash-rev-title" data-i18n="dash-rev">Estado de Revisión</span>`;
            
            const statusDiv = document.createElement('div');
            statusDiv.className = 'text-center space-y-3';

            if (revision === 'Aprobado' || revision === 'Verificado') {
                statusDiv.innerHTML = `
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-100 text-green-700 font-bold">
                        <span class="material-symbols-outlined">verified</span> Verificado / Aprobado
                    </div>
                    <p class="text-sm text-slate-600 dark:text-slate-300">
                        ¡Felicidades! Tus documentos han sido revisados y aprobados exitosamente.
                    </p>
                `;
            } else if (revision === 'En revision') {
                statusDiv.innerHTML = `
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-100 text-amber-700 font-bold">
                        <span class="material-symbols-outlined">pending</span> En Revisión
                    </div>
                    <p class="text-sm text-slate-600 dark:text-slate-300">
                        Tus documentos aún no se han revisado. Estamos en proceso de verificación.
                    </p>
                `;
            } else if (revision === 'Devuelto') {
                statusDiv.innerHTML = `
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-100 text-red-700 font-bold">
                        <span class="material-symbols-outlined">error</span> Devuelto
                    </div>
                    <p class="text-sm text-slate-600 dark:text-slate-300">
                        Se han encontrado inconsistencias en tus documentos. Por favor subsana los errores y vuelve a enviarlos.
                    </p>
                    <button onclick="showSubsanar()" class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md transition-colors w-full sm:w-auto cursor-pointer">
                        <span class="material-symbols-outlined text-lg">edit_document</span>
                        Subsanar Documentos
                    </button>
                `;
            } else {
                // Default / Pendiente
                 statusDiv.innerHTML = `
                    <span class="text-lg font-bold text-slate-800 dark:text-white flex items-center justify-center gap-2">
                        --
                    </span>
                 `;
            }
            
            revisionContainer.appendChild(statusDiv);

            // --- Sports Logic ---
            await loadSports();
        });

        async function showSubsanar() {
            document.getElementById('dashboard-view').classList.add('hidden');
            const subsanarView = document.getElementById('subsanar-view');
            subsanarView.classList.remove('hidden');
            window.scrollTo(0, 0);

            const contentContainer = subsanarView.querySelector('.max-w-3xl');
            
            // Show loading state
            contentContainer.innerHTML = `
                <div class="animate-pulse flex space-x-4 justify-center py-10">
                    <div class="rounded-full bg-slate-200 h-10 w-10"></div>
                    <div class="flex-1 space-y-6 py-1 max-w-xs">
                        <div class="h-2 bg-slate-200 rounded"></div>
                        <div class="space-y-3">
                            <div class="grid grid-cols-3 gap-4">
                                <div class="h-2 bg-slate-200 rounded col-span-2"></div>
                                <div class="h-2 bg-slate-200 rounded col-span-1"></div>
                            </div>
                            <div class="h-2 bg-slate-200 rounded"></div>
                        </div>
                    </div>
                </div>
            `;

            try {
                let studentId = sessionStorage.getItem('userId');
                try {
                    const fullData = JSON.parse(sessionStorage.getItem('fullUserData') || '{}');
                    studentId = fullData.id_estudiante || fullData.Id_estudiante || fullData.id || studentId;
                } catch (e) { console.warn('Could not parse fullUserData', e); }

                if (!studentId) {
                    contentContainer.innerHTML = '<p class="text-red-500">Error: No se encontró el ID del estudiante.</p>';
                    return;
                }

                const response = await fetch('https://n8n.nextgonsas.com.co/webhook/subsanar/documentos', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id_estudiante: studentId })
                });

                const contentType = response.headers.get("content-type");
                
                let data = null;
                let rawText = null;

                if (contentType && contentType.indexOf("application/json") !== -1) {
                    const jsonData = await response.json();
                    console.log('Subsanar Response:', jsonData);
                    // Handle Array response [ { ... } ]
                    data = Array.isArray(jsonData) ? (jsonData[0] || {}) : (jsonData || {});
                } else {
                    rawText = await response.text();
                }

                if (data) {
                    // Build Form
                    const comments = data.comentarios || "Revise los requerimientos e ingrese los documentos correctamente.";
                    const showDiscapacidad = data.discapacidad === 'SÍ';
                    const showVictima = data["es_victima_conflicto"] === 'SÍ' || data["es_victima"] === 'SÍ'; // Handle potential naming variations

                    let html = `
                        <div class="text-left space-y-6">
                            <!-- Comentarios del Administrador -->
                            <div class="bg-amber-50 dark:bg-amber-900/20 border-l-4 border-amber-500 p-4 rounded-r shadow-sm">
                                <h3 class="text-sm font-bold text-amber-800 dark:text-amber-200 uppercase tracking-wide mb-2 flex items-center gap-2">
                                    <span class="material-symbols-outlined">info</span> Observaciones
                                </h3>
                                <p class="text-amber-900 dark:text-amber-100 font-medium whitespace-pre-wrap">${comments}</p>
                            </div>

                            <form id="subsanarForm" onsubmit="submitSubsanar(event)" enctype="multipart/form-data" class="space-y-6">
                                <p class="text-slate-600 dark:text-slate-300 text-sm">Por favor cargue nuevamente los documentos solicitados o que presentaron error.</p>

                                <!-- 1. Documento de Identidad -->
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                        1. Copia Documento de Identidad (PDF/Imagen) *
                                        <span class="text-xs text-slate-500 block font-normal">Máximo 2 archivos (PDF o Imagen).</span>
                                    </label>
                                    <input type="file" name="archivo_documento" accept=".pdf,.jpg,.jpeg,.png" multiple onchange="updateUploadStatus(this)"
                                        class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-primary/10 file:text-primary hover:file:bg-primary/20 dark:file:bg-slate-700 dark:file:text-white border border-gray-300 dark:border-slate-600 rounded-lg cursor-pointer">
                                </div>

                                <!-- 2. Certificado EPS -->
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                        2. COPIA DEL CERTIFICADO DE LA EPS ACTIVO, NO SE ACEPTA CERTIFICADO DE LA PLATAFORMA ADRES *
                                        <span class="text-xs text-slate-500 block font-normal">Máximo 2 archivos (PDF o Imagen).</span>
                                    </label>
                                    <input type="file" name="certificado_eps" accept=".pdf,.jpg,.jpeg,.png" multiple onchange="updateUploadStatus(this)"
                                        class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-primary/10 file:text-primary hover:file:bg-primary/20 dark:file:bg-slate-700 dark:file:text-white border border-gray-300 dark:border-slate-600 rounded-lg cursor-pointer">
                                </div>

                                <!-- 3. Autorización / Consentimiento -->
                                <div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded-r shadow-sm">
                                    <h4 class="text-sm font-bold text-blue-800 dark:text-blue-200 uppercase tracking-wide mb-2 flex items-center gap-2">
                                        <span class="material-symbols-outlined">description</span> Consentimiento Informado (Requisito Obligatorio)
                                    </h4>
                                    <p class="text-sm text-blue-700 dark:text-blue-300 mb-3">
                                        Descargue, imprima y firme el consentimiento informado antes de llenar el formulario.
                                    </p>
                                    <div class="flex flex-col sm:flex-row gap-4 mb-4">
                                        <a href="https://drive.google.com/file/d/1_guf9DffYecV5XxpPIQHqx71QNOpH0v-/view" target="_blank" rel="noopener noreferrer" 
                                           class="inline-flex items-center gap-2 text-xs font-bold text-white bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded transition-colors">
                                            <span class="material-symbols-outlined text-sm">download</span> MENORES DE EDAD
                                        </a>
                                        <a href="https://drive.google.com/file/d/1fHgvZAYo542cQuwBWxir4EZ6m564_MMk/view" target="_blank" rel="noopener noreferrer" 
                                           class="inline-flex items-center gap-2 text-xs font-bold text-white bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded transition-colors">
                                            <span class="material-symbols-outlined text-sm">download</span> MAYORES DE EDAD
                                        </a>
                                    </div>

                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                            3. Subir Consentimiento Firmado (PDF/Imagen) *
                                            <span class="text-xs text-slate-500 block font-normal">Máximo 2 archivos (PDF o Imagen).</span>
                                        </label>
                                        <input type="file" name="autorizacion" accept=".pdf,.jpg,.jpeg,.png" multiple onchange="updateUploadStatus(this)"
                                            class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-primary/10 file:text-primary hover:file:bg-primary/20 dark:file:bg-slate-700 dark:file:text-white border border-gray-300 dark:border-slate-600 rounded-lg cursor-pointer bg-white dark:bg-slate-800">
                                    </div>
                                </div>
                    `;

                    // Conditional: Discapacidad
                    if (showDiscapacidad) {
                        html += `
                            <div class="p-4 bg-slate-50 dark:bg-slate-700/50 rounded-lg border border-slate-200 dark:border-slate-600">
                                <label class="block text-sm font-bold text-slate-700 dark:text-slate-200 mb-2">
                                    Soporte de Discapacidad (RUV o Certificado)
                                    <span class="text-xs text-slate-500 block font-normal">Máximo 2 archivos (PDF o Imagen).</span>
                                </label>
                                <input type="file" name="archivo_discapacidad" accept=".pdf,.jpg,.jpeg,.png" multiple onchange="updateUploadStatus(this)"
                                        class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-primary/10 file:text-primary hover:file:bg-primary/20 dark:file:bg-slate-700 dark:file:text-white border border-gray-300 dark:border-slate-600 rounded-lg cursor-pointer">
                            </div>
                        `;
                    }

                    // Conditional: Victima
                    if (showVictima) {
                        html += `
                            <div class="p-4 bg-slate-50 dark:bg-slate-700/50 rounded-lg border border-slate-200 dark:border-slate-600">
                                <label class="block text-sm font-bold text-slate-700 dark:text-slate-200 mb-2">
                                    Soporte Víctima del Conflicto (RUV)
                                    <span class="text-xs text-slate-500 block font-normal">Máximo 2 archivos (PDF o Imagen).</span>
                                </label>
                                <input type="file" name="archivo_victima" accept=".pdf,.jpg,.jpeg,.png" multiple onchange="updateUploadStatus(this)"
                                        class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-primary/10 file:text-primary hover:file:bg-primary/20 dark:file:bg-slate-700 dark:file:text-white border border-gray-300 dark:border-slate-600 rounded-lg cursor-pointer">
                            </div>
                        `;
                    }

                    html += `
                                <!-- Status bar for uploaded files -->
                                <div id="upload-status-container" class="hidden p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                                    <h4 class="text-sm font-bold text-blue-800 dark:text-blue-200 mb-2 flex items-center gap-2">
                                        <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">check_circle</span> Documentos seleccionados:
                                    </h4>
                                    <ul id="upload-status-list" class="text-sm text-blue-700 dark:text-blue-300 space-y-1"></ul>
                                </div>

                                <div class="pt-4">
                                    <div id="upload-progress-container" class="hidden mb-4">
                                        <div class="flex justify-between text-xs text-slate-500 mb-1">
                                            <span>Subiendo archivos...</span>
                                            <span id="upload-percentage">0%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-2.5">
                                            <div id="upload-progress-bar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                                        </div>
                                    </div>
                                    <button type="submit" id="btnSubmitSubsanar" class="w-full bg-primary hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md hover:shadow-xl transition-all flex items-center justify-center gap-2">
                                        <span class="material-symbols-outlined">send</span> Enviar Correcciones
                                    </button>
                                </div>
                            </form>
                        </div>
                    `;

                    contentContainer.innerHTML = html;

                } else if (contentType && contentType.indexOf("text/html") !== -1) {
                    contentContainer.innerHTML = rawText;
                } else {
                     contentContainer.innerHTML = `<div class="text-left bg-white p-4 rounded shadow"><p class="text-red-500">Formato de respuesta desconocido.</p><pre class="text-xs overflow-auto mt-2">${JSON.stringify(data || rawText, null, 2)}</pre></div>`;
                }
                
            } catch (error) {
                console.error('Error loading subsanar docs:', error);
                contentContainer.innerHTML = `
                    <div class="text-center text-red-500">
                        <p>Ocurrió un error al cargar el formulario.</p>
                        <p class="text-xs mt-2 text-slate-400">${error.message}</p>
                        <button onclick="showSubsanar()" class="mt-4 px-4 py-2 bg-slate-200 dark:bg-slate-700 rounded hover:bg-slate-300 transition-colors">Reintentar</button>
                    </div>
                `;
            }
        }

        async function submitSubsanar(event) {
            event.preventDefault();
            const form = event.target;
            const btn = document.getElementById('btnSubmitSubsanar');
            const originalBtnText = btn.innerHTML;

            // Basic Validation
            const formData = new FormData();
            
            let hasFile = false;
            
            // Re-build formData entirely from inputs and fileStore
            const formInputs = new FormData(form);
            for (let [key, value] of formInputs.entries()) {
                if (!(value instanceof File)) {
                    // Campos de texto u ocultos normales
                    formData.append(key, value);
                }
            }

            // Añadir los archivos desde el fileStore renombrados con sufijos _1, _2
            const fileInputs = form.querySelectorAll('input[type="file"]');

            // Pre-flight check: Validar si algún archivo está protegido por contraseña
            for (const input of fileInputs) {
                const name = input.name;
                if (fileStore[name] && fileStore[name].files.length > 0) {
                    for (let i = 0; i < fileStore[name].files.length; i++) {
                        const file = fileStore[name].files[i];
                        if (await isPdfEncrypted(file)) {
                            alert(`El archivo "${file.name}" está protegido con contraseña. Por favor remueva la clave antes de enviarlo.`);
                            return;
                        }
                    }
                }
            }

            fileInputs.forEach(input => {
                const name = input.name;
                if (fileStore[name] && fileStore[name].files.length > 0) {
                    for (let i = 0; i < fileStore[name].files.length; i++) {
                        const originalFile = fileStore[name].files[i];
                        
                        // Separar nombre y extensión
                        const lastDotIndex = originalFile.name.lastIndexOf('.');
                        let baseName = originalFile.name;
                        let extension = '';
                        
                        if (lastDotIndex !== -1) {
                            baseName = originalFile.name.substring(0, lastDotIndex);
                            extension = originalFile.name.substring(lastDotIndex);
                        }
                        
                        // Añadir el sufijo numérico, ej: archivo_1.pdf, archivo_2.jpg
                        const newName = `${baseName}_${i + 1}${extension}`;
                        
                        // Crear nuevo objeto File con el nuevo nombre y el mismo contenido
                        const renamedFile = new File([originalFile], newName, { type: originalFile.type });
                        
                        // Añadir al formData final. N8N agrupará si tienen el mismo key 'name', o se puede usar array
                        formData.append(name, renamedFile);
                        hasFile = true;
                    }
                }
            });
            
            if (!hasFile) {
                alert('Debe cargar al menos un documento para enviar las correcciones. Puede enviar 1 o varios documentos.');
                return;
            }
            
            // Append Student ID
            let studentId = sessionStorage.getItem('userId');
            try {
                const fullData = JSON.parse(sessionStorage.getItem('fullUserData') || '{}');
                studentId = fullData.id_estudiante || fullData.Id_estudiante || fullData.id || studentId;
            } catch (e) {}
            
            if (studentId) {
                formData.append('id_estudiante', studentId);
            } else {
                alert('No se pudo identificar al estudiante. Por favor recargue e inicie sesión nuevamente.');
                return;
            }

            // UI Loading
            btn.disabled = true;
            btn.innerHTML = '<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div> Iniciando subida...';
            
            const progressContainer = document.getElementById('upload-progress-container');
            const progressBar = document.getElementById('upload-progress-bar');
            const progressText = document.getElementById('upload-percentage');
            
            if (progressContainer) progressContainer.classList.remove('hidden');
            if (progressBar) progressBar.style.width = '0%';
            if (progressText) progressText.innerText = '0%';

            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://n8n.nextgonsas.com.co/webhook/actualizar/documentos/estudiante', true);

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    const percentComplete = Math.round((e.loaded / e.total) * 100);
                    if (progressBar) progressBar.style.width = percentComplete + '%';
                    if (progressText) progressText.innerText = percentComplete + '%';
                    
                    if (percentComplete === 100) {
                        btn.innerHTML = '<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div> Procesando servidor...';
                    } else {
                        btn.innerHTML = `<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div> Subiendo ${percentComplete}%`;
                    }
                }
            };

            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    sessionStorage.setItem('userRevision', 'En revision'); // Actualizar estado local
                    window.location.reload();
                } else {
                    console.error('Error submitting form:', xhr.statusText);
                    alert('Hubo un error al procesar los documentos en el servidor. Por favor intente nuevamente.');
                    resetBtnUI();
                }
            };

            xhr.onerror = function() {
                console.error('Error de red durante la subida.');
                alert('Hubo un error de conexión al enviar los documentos. Verifique su internet e intente nuevamente.');
                resetBtnUI();
            };

            function resetBtnUI() {
                btn.disabled = false;
                btn.innerHTML = originalBtnText;
                if (progressContainer) progressContainer.classList.add('hidden');
                if (progressBar) progressBar.style.width = '0%';
            }

            // Iniciar el envío real
            xhr.send(formData);
        }

        function showDashboard() {
            document.getElementById('subsanar-view').classList.add('hidden');
            const sportDetailsView = document.getElementById('sport-details-view');
            if (sportDetailsView) sportDetailsView.classList.add('hidden');
            document.getElementById('dashboard-view').classList.remove('hidden');
            window.scrollTo(0, 0);
        }

        function showSportDetails(sportObjectString) {
            // Deserializamos el objeto
            const sport = JSON.parse(decodeURIComponent(sportObjectString));
            
            document.getElementById('dashboard-view').classList.add('hidden');
            document.getElementById('sport-details-view').classList.remove('hidden');
            window.scrollTo(0, 0);

            document.getElementById('sport-details-title').innerText = sport.nombre_deporte || 'Detalles del Deporte';
            
            // Si el objeto deporte tiene la información, se muestra. De lo contrario 'Por definir'
            document.getElementById('sp-lugar').innerText = sport.lugar || 'Por definir';
            document.getElementById('sp-horario').innerText = sport.horario || 'Por definir';
            document.getElementById('sp-implementos').innerText = sport.implementos || 'Por definir';

            loadComunicados(sport);
            switchSportTab('comunicados');
        }

        function switchSportTab(tabId) {
            document.querySelectorAll('.sport-tab-content').forEach(el => {
                el.classList.remove('block');
                el.classList.add('hidden');
            });
            document.getElementById('tab-content-' + tabId).classList.remove('hidden');
            document.getElementById('tab-content-' + tabId).classList.add('block');

            document.querySelectorAll('.sport-tab').forEach(el => {
                el.classList.remove('border-primary', 'text-primary');
                el.classList.add('border-transparent', 'text-slate-500');
            });
            const activeTab = document.getElementById('tab-' + tabId);
            activeTab.classList.remove('border-transparent', 'text-slate-500');
            activeTab.classList.add('border-primary', 'text-primary');
        }

        async function loadComunicados(sport) {
            const container = document.getElementById('tab-content-comunicados');
            container.innerHTML = `
                <div class="flex justify-center py-8">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                </div>
            `;
            
            try {
                let studentId = sessionStorage.getItem('userId');
                try {
                    const fullData = JSON.parse(sessionStorage.getItem('fullUserData') || '{}');
                    studentId = fullData.id_estudiante || fullData.Id_estudiante || fullData.id || studentId;
                } catch (e) {}

                const response = await fetch('https://n8n.nextgonsas.com.co/webhook/comunicados/estudiantes', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id_deporte: sport.id_deporte || sport.Id_deporte })
                });

                if (!response.ok) throw new Error('Error en la red');
                
                const dataArray = await response.json();
                let csvString = '';
                
                if (Array.isArray(dataArray) && dataArray.length > 0 && dataArray[0].ok) {
                    csvString = dataArray[0].comunicados;
                } else if (dataArray.ok) {
                    csvString = dataArray.comunicados;
                } else {
                    throw new Error('Respuesta inválida o sin datos');
                }
                
                if (!csvString) {
                    throw new Error('Sin comunicados');
                }

                // Parse CSV list split by newline
                const lines = csvString.split('\n');
                if (lines.length > 1 && lines[0].toLowerCase().includes('titulo,mensaje')) {
                    const comunicados = [];
                    for (let i = 1; i < lines.length; i++) {
                        const line = lines[i].trim();
                        if (!line) continue;
                        
                        // Parse based on the first comma
                        const firstComma = line.indexOf(',');
                        if (firstComma > -1) {
                            comunicados.push({
                                titulo: line.substring(0, firstComma).trim(),
                                mensaje: line.substring(firstComma + 1).trim()
                            });
                        }
                    }

                    if (comunicados.length === 0) throw new Error('Sin comunicados válidos');

                    let html = '<div class="space-y-4 text-left px-2 py-4">';
                    comunicados.forEach(item => {
                        html += `
                            <div class="bg-gray-50 dark:bg-slate-700/50 p-4 rounded-lg border border-gray-200 dark:border-slate-600 shadow-sm relative overflow-hidden">
                                <div class="absolute top-0 left-0 w-1 h-full bg-primary"></div>
                                <h4 class="font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2">
                                    <span class="material-symbols-outlined text-primary text-xl">campaign</span> ${item.titulo}
                                </h4>
                                <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">${item.mensaje}</p>
                            </div>
                        `;
                    });
                    html += '</div>';
                    container.innerHTML = html;
                } else {
                    throw new Error('Formato CSV no reconocido');
                }

            } catch (error) {
                console.error('Error loading comunicados:', error);
                container.innerHTML = `
                    <div class="text-center py-10">
                        <span class="material-symbols-outlined text-6xl text-slate-300 dark:text-slate-600 mb-4 block">notifications_off</span>
                        <p class="text-slate-500 font-medium text-lg">Sin comunicados recientes</p>
                    </div>
                `;
            }
        }

        async function loadSports() {
            const container = document.getElementById('sports-container');
            const sportsList = document.getElementById('sports-list');
            
            try {
                // Get Student ID from Session
                let studentId = sessionStorage.getItem('userId');
                
                // Try to find the specific EST code from fullUserData if available
                try {
                    const fullData = JSON.parse(sessionStorage.getItem('fullUserData') || '{}');
                    studentId = fullData.id_estudiante || fullData.Id_estudiante || fullData.id || studentId;
                } catch (e) { console.warn('Could not parse fullUserData', e); }

                // ALERT DEBUG 1 (Removed)

                if (!studentId) {
                    console.error('No student ID found in session');
                    return;
                }

                console.log('Fetching sports for Student ID:', studentId);

                // Call API
                const response = await fetch('https://n8n.nextgonsas.com.co/webhook/estudiante/deporte', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id_estudiante: studentId })
                });

                const responseData = await response.json();
                console.log('API Response:', responseData);

                let sports = [];

                // 1. Check if response IS the array of sports directly
                // Example: [ { "id_deporte": "...", "nombre_deporte": "..." }, ... ]
                if (Array.isArray(responseData) && responseData.length > 0 && (responseData[0].id_deporte || responseData[0].nombre_deporte)) {
                    sports = responseData;
                }
                // 2. Check if response is wrapped in an object with 'resultados'
                // Example: { "ok": true, "resultados": [ ... ] }
                else if (responseData && Array.isArray(responseData.resultados)) {
                    sports = responseData.resultados;
                }
                // 3. Check if response is an array wrapping the object with 'resultados'
                // Example: [ { "ok": true, "resultados": [ ... ] } ]
                else if (Array.isArray(responseData) && responseData.length > 0 && responseData[0].resultados && Array.isArray(responseData[0].resultados)) {
                    sports = responseData[0].resultados;
                }

                if (sports.length > 0) {
                    container.classList.remove('hidden');
                    
                    // Clear previous content just in case
                    sportsList.innerHTML = '';
                    
                    sports.forEach(sport => {
                        const btn = document.createElement('div');
                        btn.className = 'bg-white dark:bg-slate-700 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-slate-600 flex items-center justify-between hover:shadow-md transition-all cursor-pointer group';
                        
                        // Parse array object
                        const sportDataStr = encodeURIComponent(JSON.stringify(sport));
                        btn.setAttribute('onclick', `showSportDetails('${sportDataStr}')`);
                        
                        btn.innerHTML = `
                            <div class="flex items-center gap-3">
                                <div class="h-10 w-10 rounded-full bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/50 transition-colors">
                                    <span class="material-symbols-outlined">sports_score</span>
                                </div>
                                <span class="font-medium text-slate-700 dark:text-slate-200 group-hover:text-primary transition-colors">${sport.nombre_deporte || 'Deporte sin nombre'}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-medium sm:block hidden">Inscrito</span>
                                <span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">chevron_right</span>
                            </div>
                        `;
                        sportsList.appendChild(btn);
                    });
                } else {
                    console.log('No sports found or API error:', responseData);
                    container.classList.remove('hidden');
                    sportsList.innerHTML = '<p class="text-sm text-slate-400">No se encontraron deportes inscritos.</p>';
                }

            } catch (error) {
                console.error('Error loading sports:', error);
            }
        }

        const fileStore = {};

        function removeFile(inputName, fileName) {
            if (fileStore[inputName]) {
                const dt = new DataTransfer();
                for (let i = 0; i < fileStore[inputName].files.length; i++) {
                    const file = fileStore[inputName].files[i];
                    if (file.name !== fileName) {
                        dt.items.add(file);
                    }
                }
                fileStore[inputName] = dt;
                const input = document.querySelector(`input[name="${inputName}"]`);
                if (input) {
                    input.files = dt.files;
                }
                updateUploadStatus(); // Update UI without passing triggerInput
            }
        }

        async function isPdfEncrypted(file) {
            if (!file || file.type !== 'application/pdf') return false;
            try {
                const chunk = await file.slice(0, 100000).arrayBuffer();
                const text = new TextDecoder('latin1').decode(chunk);
                return /\/Encrypt\s*(\d+\s+\d+\s+R|<<)/i.test(text) || /\/Encrypt\b/i.test(text);
            } catch (e) {
                console.warn('Error al verificar encriptación de PDF:', e);
                return false;
            }
        }

        async function updateUploadStatus(triggerInput = null) {
            const form = document.getElementById('subsanarForm');
            if (!form) return;
            
            if (triggerInput) {
                const name = triggerInput.name;
                if (!fileStore[name]) {
                    fileStore[name] = new DataTransfer();
                }
                
                // Add new files from this selection
                for (let i = 0; i < triggerInput.files.length; i++) {
                    const file = triggerInput.files[i];

                    // Validar si es un PDF protegido por contraseña
                    if (await isPdfEncrypted(file)) {
                        alert(`El archivo PDF "${file.name}" está protegido con contraseña. Por favor remueva la clave antes de adjuntarlo.`);
                        continue;
                    }

                    let exists = false;
                    for (let j = 0; j < fileStore[name].files.length; j++) {
                        if (fileStore[name].files[j].name === file.name && fileStore[name].files[j].size === file.size) {
                            exists = true;
                        }
                    }
                    
                    if (!exists) {
                        if (fileStore[name].items.length < 2) {
                            fileStore[name].items.add(file);
                        } else {
                            alert('Solo se permiten máximo 2 archivos por campo.');
                            break;
                        }
                    }
                }
                
                // Re-assign the accumulated files to the input safely
                triggerInput.files = fileStore[name].files;
            }

            const fileInputs = form.querySelectorAll('input[type="file"]');
            const statusContainer = document.getElementById('upload-status-container');
            const statusList = document.getElementById('upload-status-list');
            
            if (!statusContainer || !statusList) return;
            
            statusList.innerHTML = '';
            let hasFiles = false;
            
            fileInputs.forEach(input => {
                if (input.files && input.files.length > 0) {
                    hasFiles = true;
                    
                    for (let i = 0; i < input.files.length; i++) {
                        const fileName = input.files[i].name;
                        
                        let fieldName = input.name;
                        let fieldNameLabel = fieldName;
                        if (fieldName === 'archivo_documento') fieldNameLabel = 'Documento de Identidad';
                        else if (fieldName === 'certificado_eps') fieldNameLabel = 'Certificado EPS';
                        else if (fieldName === 'autorizacion') fieldNameLabel = 'Consentimiento Informado';
                        else if (fieldName === 'archivo_discapacidad') fieldNameLabel = 'Soporte de Discapacidad';
                        else if (fieldName === 'archivo_victima') fieldNameLabel = 'Soporte Víctima del Conflicto';
                        
                        const li = document.createElement('li');
                        li.className = 'flex justify-between items-center bg-blue-100 dark:bg-blue-800/30 px-3 py-2 rounded mt-2 shadow-sm border border-blue-200 dark:border-blue-700/50';
                        li.innerHTML = `<span><strong>${fieldNameLabel}:</strong> ${fileName}</span> 
                            <button type="button" onclick="removeFile('${input.name}', '${fileName}')" class="text-red-500 hover:text-red-700 p-1 flex items-center justify-center rounded hover:bg-red-100 dark:hover:bg-red-900/50 transition-colors" title="Quitar archivo">
                                <span class="material-symbols-outlined text-sm">close</span>
                            </button>`;
                        statusList.appendChild(li);
                    }
                }
            });
            
            if (hasFiles) {
                statusContainer.classList.remove('hidden');
            } else {
                statusContainer.classList.add('hidden');
            }
        }

        /* ---------------- SETTINGS LOGIC ---------------- */
        
        function openSettings() {
            document.getElementById('settings-modal').classList.remove('hidden');
        }

        function closeSettings() {
            document.getElementById('settings-modal').classList.add('hidden');
        }

        // Close modal when clicking outside of it
        document.getElementById('settings-modal').addEventListener('click', function(event) {
            if (event.target === this) {
                closeSettings();
            }
        });

        // Change Password Logic
        function openChangePasswordModal(isForced = false) {
            closeSettings(); // Cerrar ajustes para no superponer
            
            const isMust = isForced || sessionStorage.getItem('mustChangePassword') === 'true';
            const closeBtn = document.getElementById('btnClosePasswordModal');
            const cancelBtn = document.getElementById('btnCancelPasswordModal');
            const msgDiv = document.getElementById('changePasswordMsg');

            if (closeBtn) closeBtn.style.display = isMust ? 'none' : 'block';
            if (cancelBtn) cancelBtn.style.display = isMust ? 'none' : 'block';

            if (isMust && msgDiv) {
                msgDiv.className = 'text-xs font-semibold p-2.5 rounded bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200 block text-center mb-3';
                msgDiv.textContent = 'Por motivos de seguridad, debe cambiar la contraseña por defecto (12345) antes de continuar.';
                msgDiv.classList.remove('hidden');
            } else if (msgDiv) {
                msgDiv.classList.add('hidden');
            }

            document.getElementById('change-password-modal').classList.remove('hidden');
            document.getElementById('changePasswordForm').reset();
        }

        function closeChangePasswordModal() {
            if (sessionStorage.getItem('mustChangePassword') === 'true') {
                return;
            }
            document.getElementById('change-password-modal').classList.add('hidden');
        }

        document.getElementById('change-password-modal').addEventListener('click', function(event) {
            if (event.target === this && sessionStorage.getItem('mustChangePassword') !== 'true') {
                closeChangePasswordModal();
            }
        });

        async function submitChangePassword(event) {
            event.preventDefault();
            const newPass = document.getElementById('new_password').value;
            const confirmPass = document.getElementById('confirm_password').value;

            if (newPass === '12345') {
                alert('La nueva contraseña no puede ser la clave por defecto (12345).');
                return;
            }

            if (newPass !== confirmPass) {
                alert('Las contraseñas no coinciden. Por favor, intente de nuevo.');
                return; // Evita enviar si no son iguales
            }

            let studentId = sessionStorage.getItem('userId');
            try {
                const fullData = JSON.parse(sessionStorage.getItem('fullUserData') || '{}');
                studentId = fullData.id_estudiante || fullData.Id_estudiante || fullData.id || studentId;
            } catch (e) {}

            if (!studentId) {
                alert('Error: No se encontró el ID del estudiante.');
                return;
            }

            const btn = document.getElementById('btnSubmitPassword');
            const originalBtnText = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div> Procesando...';

            const userType = sessionStorage.getItem('userType') || 'Estudiante';
            try {
                const response = await fetch('https://n8n.nextgonsas.com.co/webhook/nueva/contraseña/sin/token', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ 
                        id_estudiante: studentId,
                        clave: newPass,
                        Tipo: userType
                    })
                });

                if (response.ok) {
                    sessionStorage.removeItem('mustChangePassword');
                    const closeBtn = document.getElementById('btnClosePasswordModal');
                    const cancelBtn = document.getElementById('btnCancelPasswordModal');
                    if (closeBtn) closeBtn.style.display = 'block';
                    if (cancelBtn) cancelBtn.style.display = 'block';

                    alert('Contraseña actualizada correctamente.');
                    closeChangePasswordModal();
                } else {
                    alert('Hubo un error al actualizar la contraseña. Por favor intente más tarde.');
                }
            } catch (error) {
                console.error('Error changing password:', error);
                alert('Hubo un error de conexión. Verifique su internet e intente nuevamente.');
            } finally {
                btn.disabled = false;
                btn.innerHTML = originalBtnText;
            }
        }
        
        // Dark Mode Logic
        function toggleDarkMode(isDark) {
            const htmlClass = document.documentElement.classList;
            if (isDark) {
                htmlClass.add('dark');
                htmlClass.remove('light');
                localStorage.setItem('theme', 'dark');
            } else {
                htmlClass.remove('dark');
                htmlClass.add('light');
                localStorage.setItem('theme', 'light');
            }
            updateThemeButtons(isDark);
        }

        function updateThemeButtons(isDark) {
            const btnLight = document.getElementById('btn-theme-light');
            const btnDark = document.getElementById('btn-theme-dark');
            if(btnLight && btnDark) {
               if (isDark) {
                   btnLight.className = "px-3 py-1 text-xs font-medium rounded bg-transparent text-slate-500 hover:text-slate-800 dark:hover:text-white transition-colors flex items-center gap-1";
                   btnDark.className = "px-3 py-1 text-xs font-medium rounded bg-gray-100 dark:bg-slate-700 dark:text-white text-slate-800 transition-colors flex items-center gap-1 shadow-sm";
               } else {
                   btnLight.className = "px-3 py-1 text-xs font-medium rounded bg-white text-slate-800 shadow-sm transition-colors flex items-center gap-1";
                   btnDark.className = "px-3 py-1 text-xs font-medium rounded bg-transparent text-slate-500 hover:text-slate-800 transition-colors flex items-center gap-1";
               }
            }
        }

        // Translation Logic
        const i18n = {
            es: {
                'nav-portal': 'Portal de Servicios IMRD Cota',
                'nav-logout': 'Cerrar Sesión',
                'header-student': 'Estudiante',
                'header-panel': 'Panel de Control',
                'dash-panel': 'Panel de Estudiante',
                'dash-rev': 'Estado de Revisión',
                'dash-settings': 'Ajustes del Perfil',
                'set-pass': 'Contraseña',
                'set-pass-desc': 'Actualiza tu contraseña de acceso',
                'set-pass-btn': 'Cambiar',
                'set-app': 'Apariencia',
                'set-app-desc': 'Cambiar entre modo claro y oscuro',
                'set-app-light': 'Claro',
                'set-app-dark': 'Oscuro',
                'set-lang': 'Idioma',
                'set-lang-desc': 'Selecciona el idioma de la plataforma',
            },
            en: {
                'nav-portal': 'IMRD Cota Services Portal',
                'nav-logout': 'Logout',
                'header-student': 'Student',
                'header-panel': 'Control Panel',
                'dash-panel': 'Student Dashboard',
                'dash-rev': 'Review Status',
                'dash-settings': 'Profile Settings',
                'set-pass': 'Password',
                'set-pass-desc': 'Update your access password',
                'set-pass-btn': 'Change',
                'set-app': 'Appearance',
                'set-app-desc': 'Toggle between light and dark mode',
                'set-app-light': 'Light',
                'set-app-dark': 'Dark',
                'set-lang': 'Language',
                'set-lang-desc': 'Select the platform language',
            },
            fr: {
                'nav-portal': 'Portail de Services IMRD Cota',
                'nav-logout': 'Se déconnecter',
                'header-student': 'Étudiant',
                'header-panel': 'Panneau de Contrôle',
                'dash-panel': 'Tableau de bord de l\'étudiant',
                'dash-rev': 'Statut de Révision',
                'dash-settings': 'Paramètres du Profil',
                'set-pass': 'Mot de passe',
                'set-pass-desc': 'Mettez à jour votre mot de passe d\'accès',
                'set-pass-btn': 'Changer',
                'set-app': 'Apparence',
                'set-app-desc': 'Basculer entre le mode clair et sombre',
                'set-app-light': 'Clair',
                'set-app-dark': 'Sombre',
                'set-lang': 'Langue',
                'set-lang-desc': 'Sélectionnez la langue de la plateforme',
            }
        };

        function changeLanguage(lang) {
            if(!i18n[lang]) return;
            localStorage.setItem('lang', lang);
            document.documentElement.lang = lang;
            
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                if (i18n[lang] && i18n[lang][key]) {
                    el.innerText = i18n[lang][key];
                }
            });

            const selector = document.getElementById('lang-selector');
            if (selector) selector.value = lang;
        }

        // Initialize state on DOM Load
        document.addEventListener('DOMContentLoaded', () => {
            // Theme init
            const isDark = document.documentElement.classList.contains('dark');
            updateThemeButtons(isDark);

            // Language init
            const savedLang = localStorage.getItem('lang') || 'es';
            changeLanguage(savedLang);
        });

    </script>

    <footer class="bg-slate-900 text-slate-400 py-6 text-center text-xs border-t-4 border-primary mt-auto">
        <p>© 2026 IMRD Cota - Todos los derechos reservados</p>
    </footer>

</body>

</html>
